Badge / Insignia

Visión General de Badges y Tags

Los componentes Badge y Tag en Emvi UI permiten etiquetar, clasificar y resaltar elementos de forma visual, compacta y accesible. Aunque ambos cumplen funciones similares, se diferencian por su contexto de uso:

Badge: Indica conteo, estado o notificación. Generalmente acompaña a otro componente (botón, ícono, avatar).

Tag: Representa una categoría, etiqueta o filtro. Puede ser interactiva (editable, eliminable) o estática.

Ambos componentes están diseñados para integrarse de forma nativa en interfaces responsivas, con soporte para variantes de color, ícono, tamaños y comportamiento.

Indicando estado

Las insignias son perfectas para indicar actualizaciones de estado. Ya sea mostrando un estado en línea/fuera de línea, disponibilidad o cualquier otro estado, las insignias proporcionan información inmediata de un vistazo. Esto ayuda a los usuarios a comprender rápidamente el estado de diferentes elementos sin necesidad de hacer clic o navegar más, mejorando la experiencia general del usuario.

Resaltando notificaciones

Las insignias se usan comúnmente para resaltar notificaciones o alertas. A menudo aparecen con números para mostrar mensajes no leídos, tareas pendientes o nuevas actualizaciones. Esta señal visual asegura que los usuarios no pasen por alto información importante y puedan abordar las notificaciones rápidamente, haciendo que su interacción con su sitio sea más eficiente y receptiva.

Marcando eventos

Las insignias también son excelentes para marcar eventos o condiciones especiales. Pueden denotar nuevas funciones, ofertas por tiempo limitado o cualquier evento que requiera atención. Colocar una insignia junto a un elemento puede atraer el foco de los usuarios hacia él, asegurando que noten y participen con contenido importante. Nuestro UI KIT incluye componentes de insignias versátiles que pueden personalizarse para adaptarse a diversas necesidades, mejorando tanto la funcionalidad como la estética de su diseño.

Variantes y Tipología

Emvi UI proporciona múltiples variantes para los componentes Badge y Tag, pensadas para cubrir distintos casos de uso y adaptarse a diversas jerarquías visuales:

Badge:
Contador Numérico: Muestra cantidad o notificación (ej. 3, +99), común en botones e íconos.
Estado Visual: Representa status como "Activo", "Nuevo", "Pendiente" con color semántico.
Punto de Estado: Indica presencia o conexión mediante punto de color pequeño.

Tag:
Etiqueta Estática: Muestra texto categórico (ej. Marketing, Beta).
Etiqueta Interactiva: Incluye botón de cierre o permite selección múltiple.
Tag con Ícono: Añade contexto visual con íconos representativos a la izquierda o derecha.

Cada variante está disponible en tamaños XS, SM y MD, con soporte para personalización vía tokens (tipografía, padding, colores, border-radius).

Comportamiento Interactivo y Estados

Los componentes Badge y Tag en Emvi UI pueden ser estáticos o interactivos, según el contexto. Las versiones interactivas responden a eventos como hover, focus, click o cierre, y están diseñadas para mejorar la experiencia del usuario sin comprometer la accesibilidad.

Estados Soportados:
Hover / Focus: Cambio de fondo o contorno para indicar interactividad.
Active / Pressed: Feedback visual al presionar o seleccionar.
Disabled: Estilo atenuado y sin interactividad.
Dismissible: Opción de eliminar una Tag mediante ícono de cierre.

El comportamiento se alinea con los estándares WCAG y los atributos aria-* pueden aplicarse para mejorar la compatibilidad con lectores de pantalla.

Integración en Diseño y Desarrollo

Los componentes Badge y Tag están disponibles como variantes reutilizables dentro de Figma, organizados por tipo, tamaño, color y estado. Cada uno está conectado a estilos globales de tipografía, color y espaciado, permitiendo personalización controlada sin perder consistencia visual.

En entornos de desarrollo, se implementan fácilmente con clases de Tailwind como:
inline-flex, items-center, px-2, rounded-full
bg-primary-100 text-primary-700
hover:bg-primary-200 (para versiones interactivas)

El sistema también incluye soporte para slot de íconos y atributos data-* o aria-* para ampliar funcionalidad y accesibilidad.

Buenas Prácticas

Para maximizar la eficacia visual y funcional de los componentes Badge y Tag en Emvi UI, se recomienda seguir estas pautas:

- Usar badges únicamente cuando sea necesario resaltar estado, conteo o alerta.
- Evitar tags demasiado largos o que rompan el diseño responsivo.
- No utilizar tags para información crítica que no esté reflejada en otro lugar.
- Mantener consistencia en los colores semánticos según su función (status, categoría, notificación).
- Incluir etiquetas accesibles (aria-label) en tags con íconos o funciones interactivas.

Estas prácticas aseguran una experiencia de usuario clara, accesible y coherente con el resto del sistema.